import { View } from "react-native"
import React from "react"
import { Calendar } from "react-native-calendars"
import { useAppSelector } from "app/redux/hooks"

export const MultiDatePicker = ({onSelectDates}:any) => {
  const selectedDates = useAppSelector((state) => state?.createAppointment?.selectedDates)

   const threeMonthsFromNow = new Date()
  threeMonthsFromNow.setMonth(threeMonthsFromNow.getMonth() + 3)
  return (
    <View style={{ flex: 1 }}>
      <Calendar
        markingType="period"
        theme={{
          backgroundColor: "#ffffff",
          calendarBackground: "#ffffff",
          textSectionTitleColor: "#000000",
          selectedDayTextColor: "#ffffff",
          todayTextColor: "red",
          textDisabledColor: "#D3D3D3",
          textDayFontWeight: "500",
        }}
        markedDates={selectedDates}
        onDayPress={onSelectDates}
        minDate={new Date().toISOString()}
        maxDate={threeMonthsFromNow.toISOString()}
      />
    </View>
  )
}
